<template>
  <div style="margin-bottom: 20px;">
    <a-button type="primary" @click="dictFormRef.open('新增字典')">新增</a-button>
  </div>
  <a-table :loading="loading" :columns="columns" :data-source="list" :pagination="pagination" @change="handleChange">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <a href="javascript:void(0)" @click="dictItemListRef.edit(record)">
            <setting-outlined style="margin-right: 5px;"/>
            字典配置
          </a>
          <template v-if="!record.isSystem">
            <a-divider type="vertical"/>
            <a href="javascript:void(0)" @click="dictFormRef.open('修改字典',record)">
              <edit-outlined style="margin-right: 5px;"/>
              编辑
            </a>
            <a-divider type="vertical"/>
            <a-popconfirm
                key="remove"
                title="确定删除吗?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRemove(record)"
            >
              <a href="javascript:void(0)" style="color:red">
                <delete-outlined style="margin-right: 5px;"/>
                删除
              </a>
            </a-popconfirm>
          </template>
        </a-space>
      </template>
    </template>
  </a-table>
  <dict-form ref="dictFormRef" @ok="loadData"/>
  <dict-item-list ref="dictItemListRef"></dict-item-list>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import { DeleteOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { PageParam } from '@/config/common'

import DictForm from './modules/DictForm.vue'
import DictItemList from './modules/DictItemList.vue'
import { getDicts, removeDict } from '@/api/dict'
import { usePagination } from '@/modules/use-modules'

const dictFormRef = ref<InstanceType<typeof DictForm>>()
const dictItemListRef = ref<InstanceType<typeof DictItemList>>()
const columns = [
  {
    title: '字典名称',
    dataIndex: 'dictName'
  },
  {
    title: '字典编号',
    dataIndex: 'dictCode'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: '300px'
  }
]

const {
  pagination,
  loading,
  list,
  handleChange,
  loadData
} = usePagination<any>((page: PageParam) => {
  return getDicts(page, {})
})

const handleRemove = (record: any) => {
  removeDict(record.id).then(() => {
    message.info('删除成功')
    loadData()
  })
}

loadData()

</script>
